import React, {useState} from "react";
import cx from "classnames";
import { setFilter } from "../redux/actions";
import { VISIBILITY_FILTERS } from "./constants";
import { useDispatch } from 'react-redux'


export default function VisibilityFilters (props) {
  
  const dispatch = useDispatch()
  
  const [chosen, setChosen] = useState('all')

  function changeFilter(filter) {
    setChosen(filter)
    dispatch( setFilter(filter) )
    
  }

  return (

    <div className="bg-gray-200">
      
      <ul className="flex flex-row">
        {Object.keys(VISIBILITY_FILTERS).map(filterKey => {
          const currentFilter = VISIBILITY_FILTERS[filterKey];
          return (
            <li
              key={`visibility-filter-${currentFilter}`} 
              
              className={cx(
                "filter",
                currentFilter === chosen && "filter--active",
                "mx-2 my-2"
              )}

              onClick={() => {
                changeFilter(currentFilter);
              }}
              
            >
              <button>
                {currentFilter}
              </button>

            </li>
          )
        })}

      </ul>

    </div>

  )

}
